<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兴趣聊天室 - 心动匹配</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/theme-styles.css">
    <script src="js/config.js"></script> <!-- 引入配置文件 -->
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            overflow: hidden; /* 防止页面滚动 */
        }

        .container {
            width: 100vw; /* 宽度拉满 */
            height: 100vh;
            display: flex;
            flex-direction: column;
            padding: 0;
            margin: 0;
            position: relative;
        }

        .chat-header {
            position: fixed; /* 头部固定在最上面 */
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 15px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            gap: 15px;
            box-sizing: border-box;
        }

        .back-btn {
            background: none;
            border: none;
            color: var(--text-glow-color);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: background 0.3s;
        }

        .back-btn:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .room-info h1 {
            margin: 0;
            color: var(--primary-glow-color);
            font-size: 1.5rem;
            text-shadow: 0 0 10px rgba(var(--primary-glow-color-rgb), 0.5);
        }

        .room-info p {
            margin: 0;
            color: rgba(var(--text-glow-color-rgb), 0.8);
            font-size: 0.9rem;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 80px 2.5vw 120px 2.5vw; /* 为固定的头部和底部预留空间, 左右2.5vw使内容区为95vw */
            display: flex;
            flex-direction: column;
            gap: 15px;
            height: calc(100vh - 200px); /* 减去头部和底部的高度 */
            box-sizing: border-box;
        }

        .message {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .message.own {
            flex-direction: row-reverse;
            margin-left: auto; /* 使自己的消息靠右对齐 */
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-glow-color);
            box-shadow: 0 0 10px rgba(var(--primary-glow-color-rgb), 0.3);
        }

        .message-content {
            max-width: 90%; /* 增加消息内容区域的最大宽度 */
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 12px 16px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .message.own .message-content {
            background: rgba(var(--primary-glow-color-rgb), 0.2);
            border-color: rgba(var(--primary-glow-color-rgb), 0.3);
        }

        .message-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 5px;
        }

        .message-sender {
            font-weight: bold;
            color: var(--primary-glow-color);
            font-size: 0.9rem;
        }

        .message-time {
            color: rgba(var(--text-glow-color-rgb), 0.6);
            font-size: 0.8rem;
        }

        .message-text {
            color: var(--text-glow-color);
            line-height: 1.4;
        }

        .chat-input-container {
            position: fixed; /* 底部固定在最下面 */
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            box-sizing: border-box;
        }

        .chat-input-form {
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }

        .chat-input {
            flex: 1;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 25px;
            padding: 12px 16px;
            color: var(--text-glow-color);
            font-size: 1rem;
            resize: none;
            min-height: 20px;
            max-height: 100px;
            outline: none;
            transition: border-color 0.3s;
        }

        .chat-input:focus {
            border-color: var(--primary-glow-color);
            box-shadow: 0 0 10px rgba(var(--primary-glow-color-rgb), 0.3);
        }

        .chat-input::placeholder {
            color: rgba(var(--text-glow-color-rgb), 0.5);
        }

        .send-btn {
            background: var(--primary-glow-color);
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            color: white;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 0 15px rgba(var(--primary-glow-color-rgb), 0.5);
        }

        .send-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 0 20px rgba(var(--primary-glow-color-rgb), 0.7);
        }

        .send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        .typing-indicator {
            display: none;
            align-items: center;
            gap: 10px;
            padding: 10px 20px;
            color: rgba(var(--text-glow-color-rgb), 0.6);
            font-style: italic;
            position: fixed;
            bottom: 85px; /* 在输入框上方 */
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 999;
        }

        .typing-dots {
            display: flex;
            gap: 3px;
        }

        .typing-dot {
            width: 6px;
            height: 6px;
            background: var(--primary-glow-color);
            border-radius: 50%;
            animation: typing 1.5s infinite;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 60%, 100% {
                opacity: 0.3;
                transform: scale(0.8);
            }
            30% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 滚动条样式 */
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }

        .chat-messages::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 3px;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(var(--primary-glow-color-rgb), 0.5);
            border-radius: 3px;
        }

        .chat-messages::-webkit-scrollbar-thumb:hover {
            background: rgba(var(--primary-glow-color-rgb), 0.7);
        }
    </style>
</head>
<body class="theme-active">
    <div class="tech-beams-background">
        <div class="beam beam-1"></div>
        <div class="beam beam-2"></div>
        <div class="beam beam-3"></div>
        <div class="beam beam-4"></div>
    </div>

    <div class="container">
        <!-- 聊天室头部 -->
        <div class="chat-header">
            <button class="back-btn" onclick="history.back()">
                <i class="fas fa-arrow-left"></i>
            </button>
            <div class="room-info">
                <h1 id="room-name">兴趣聊天室</h1>
                <p id="room-description">正在加载...</p>
            </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chat-messages">
            <!-- 消息将通过JS动态加载 -->
        </div>

        <!-- 正在输入指示器 -->
        <div class="typing-indicator" id="typing-indicator">
            <span id="typing-user">某人</span> 正在输入
            <div class="typing-dots">
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
                <div class="typing-dot"></div>
            </div>
        </div>

        <!-- 输入区域 -->
        <div class="chat-input-container">
            <form class="chat-input-form" id="chat-form">
                <textarea 
                    class="chat-input" 
                    id="chat-input" 
                    placeholder="输入消息..." 
                    rows="1"
                ></textarea>
                <button type="submit" class="send-btn" id="send-btn">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>

    <script>
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const interestName = urlParams.get('interest') || '未知兴趣';
        
        // WebSocket连接
        let ws = null;
        let currentUser = null;

        // 页面元素
        const roomNameEl = document.getElementById('room-name');
        const roomDescriptionEl = document.getElementById('room-description');
        const chatMessagesEl = document.getElementById('chat-messages');
        const chatInputEl = document.getElementById('chat-input');
        const sendBtnEl = document.getElementById('send-btn');
        const chatFormEl = document.getElementById('chat-form');
        const typingIndicatorEl = document.getElementById('typing-indicator');

        // 初始化
        document.addEventListener('DOMContentLoaded', async () => {
            // 检查登录状态
            await checkAuth();
            
            // 设置房间信息
            roomNameEl.textContent = `${interestName} 聊天室`;
            
            // 连接WebSocket
            connectWebSocket();
            
            // 加载聊天记录
            await loadChatHistory();
            
            // 设置事件监听器
            setupEventListeners();
        });

        // 检查用户认证
        async function checkAuth() {
            const token = localStorage.getItem('token');
            if (!token) {
                alert('请先登录');
                window.location.href = 'login.html';
                return;
            }

            try {
                const response = await fetch('http://14.103.133.136:5000/api/user/profile', {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });

                if (response.ok) {
                    currentUser = await response.json();
                } else {
                    throw new Error('认证失败');
                }
            } catch (error) {
                console.error('认证错误:', error);
                alert('登录已过期，请重新登录');
                localStorage.removeItem('token');
                window.location.href = 'login.html';
            }
        }

        // 连接WebSocket
        function connectWebSocket() {
            const token = localStorage.getItem('token');
            ws = new WebSocket(`ws://14.103.133.136:8766?token=${token}&room=${encodeURIComponent(interestName)}`);

            ws.onopen = () => {
                console.log('WebSocket连接已建立 (onopen)');
                const joinMessage = {
                    type: 'join_interest_room',
                    room: interestName
                };
                console.log('发送加入房间消息:', JSON.stringify(joinMessage));
                ws.send(JSON.stringify(joinMessage));
            };

            ws.onmessage = (event) => {
                console.log('WebSocket收到原始消息 (onmessage):', event.data);
                try {
                    const data = JSON.parse(event.data);
                    console.log('WebSocket解析后消息:', data);
                    handleWebSocketMessage(data);
                } catch (e) {
                    console.error('解析WebSocket消息失败:', e, '原始数据:', event.data);
                }
            };

            ws.onclose = (event) => {
                console.log('WebSocket连接已关闭 (onclose):', event);
                // 尝试重连
                // setTimeout(connectWebSocket, 3000); // 暂时注释掉自动重连，方便调试
            };

            ws.onerror = (error) => {
                console.error('WebSocket错误 (onerror):', error);
            };
        }

        // 处理WebSocket消息
        function handleWebSocketMessage(data) {
            console.log('处理WebSocket消息 handleWebSocketMessage, type:', data.type, 'data:', data);
            switch (data.type) {
                case 'room_message':
                    addMessage(data);
                    break;
                case 'user_typing':
                    showTypingIndicator(data.username);
                    break;
                case 'user_stop_typing':
                    hideTypingIndicator();
                    break;
                case 'room_info':
                    roomDescriptionEl.textContent = `${data.memberCount} 人在线`;
                    break;
            }
        }

        // 加载聊天记录
        async function loadChatHistory() {
            try {
                const token = localStorage.getItem('token');
                const response = await fetch(`http://14.103.133.136:5000/api/chat/room-history?room=${encodeURIComponent(interestName)}`, {
                    headers: {
                        'Authorization': `Bearer ${token}`
                    }
                });

                if (response.ok) {
                    const messages = await response.json();
                    messages.forEach(addMessage);
                    scrollToBottom();
                }
            } catch (error) {
                console.error('加载聊天记录失败:', error);
            }
        }

        // 添加消息到聊天界面
        function addMessage(messageData) {
            if (!currentUser && messageData.sender_id !== undefined) { 
                console.warn('currentUser is not fully initialized during addMessage for historical messages. sender_id:', messageData.sender_id);
            }

            const messageEl = document.createElement('div');
            const isOwnMessage = currentUser && currentUser.id !== undefined && messageData.sender_id === currentUser.id;
            messageEl.className = `message ${isOwnMessage ? 'own' : ''}`;
            
            // 处理 sender_name 可能为 undefined 的情况，优先使用 nickname (历史消息), 再尝试 sender_name (新消息), username (备用), 或默认值
            const senderName = messageData.nickname || messageData.sender_name || messageData.username || '未知用户'; 
            const senderId = messageData.sender_id; // Assuming sender_id is available in messageData
            
            let avatarUrl = messageData.avatar || `https://ui-avatars.com/api/?name=${encodeURIComponent(senderName)}&background=random`;
            if (messageData.avatar && !messageData.avatar.startsWith('http') && !messageData.avatar.startsWith('assets/')) {
                avatarUrl = `${CONFIG.API_BASE_URL}${messageData.avatar}`;
            }
            
            const avatarOnclick = senderId ? `onclick="viewProfileById(${senderId})"` : "";
            const avatarCursor = senderId ? "cursor: pointer;" : "";

            messageEl.innerHTML = `
                <img src="${avatarUrl}" alt="Avatar" class="message-avatar" style="${avatarCursor}" ${avatarOnclick} onerror="this.src='https://ui-avatars.com/api/?name=${encodeURIComponent(senderName)}&background=random'">
                <div class="message-content">
                    <div class="message-header">
                        <span class="message-sender">${senderName}</span>
                        <span class="message-time">${formatTime(messageData.created_at)}</span>
                    </div>
                    <div class="message-text">${escapeHtml(messageData.message)}</div>
                </div>
            `;
            
            chatMessagesEl.appendChild(messageEl);
            scrollToBottom();
        }

        // 设置事件监听器
        function setupEventListeners() {
            // 发送消息
            chatFormEl.addEventListener('submit', (e) => {
                e.preventDefault();
                sendMessage();
            });

            // 输入框自动调整高度
            chatInputEl.addEventListener('input', () => {
                chatInputEl.style.height = 'auto';
                chatInputEl.style.height = Math.min(chatInputEl.scrollHeight, 100) + 'px';
                
                // 显示正在输入状态
                if (ws && chatInputEl.value.trim()) {
                    ws.send(JSON.stringify({
                        type: 'typing',
                        room: interestName
                    }));
                }
            });

            // 停止输入状态
            let typingTimeout;
            chatInputEl.addEventListener('input', () => {
                clearTimeout(typingTimeout);
                typingTimeout = setTimeout(() => {
                    if (ws) {
                        ws.send(JSON.stringify({
                            type: 'stop_typing',
                            room: interestName
                        }));
                    }
                }, 1000);
            });

            // 回车发送消息
            chatInputEl.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
        }

        // 发送消息
        function sendMessage() {
            const messageText = chatInputEl.value.trim();
            if (!messageText || !ws) {
                console.log('sendMessage: 消息为空或WebSocket未连接, message:', messageText, 'ws:', ws);
                return;
            }

            const messagePayload = {
                type: 'room_message',
                room: interestName,
                message: messageText
            };
            console.log('发送 room_message:', JSON.stringify(messagePayload));
            ws.send(JSON.stringify(messagePayload));

            chatInputEl.value = '';
            chatInputEl.style.height = 'auto';
            sendBtnEl.disabled = false;
        }

        // 显示正在输入指示器
        function showTypingIndicator(username) {
            if (username !== currentUser.nickname) {
                document.getElementById('typing-user').textContent = username;
                typingIndicatorEl.style.display = 'flex';
            }
        }

        // 隐藏正在输入指示器
        function hideTypingIndicator() {
            typingIndicatorEl.style.display = 'none';
        }

        // 滚动到底部
        function scrollToBottom() {
            chatMessagesEl.scrollTop = chatMessagesEl.scrollHeight;
        }

        // 格式化时间
        function formatTime(timestamp) {
            const date = new Date(timestamp);
            const now = new Date();
            const diffInHours = (now - date) / (1000 * 60 * 60);

            if (diffInHours < 24) {
                return date.toLocaleTimeString('zh-CN', { 
                    hour: '2-digit', 
                    minute: '2-digit' 
                });
            } else {
                return date.toLocaleDateString('zh-CN', { 
                    month: 'short', 
                    day: 'numeric',
                    hour: '2-digit', 
                    minute: '2-digit' 
                });
            }
        }

        // HTML转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        // 查看指定ID的用户资料 (用于消息内头像点击)
        function viewProfileById(userId) {
            if (userId) {
                window.open(`profile.html?id=${userId}`, '_blank');
            }
        }
    </script>
</body>
</html>
